﻿<!doctype html>

<html>
<head>    
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title> 
    <script src="../../scripts/boot.js"></script>

    <link href="res/menu/menu.css" rel="stylesheet" />
    <script src="res/menu/menu.js"></script>
    <script src="res/menupop.js" type="text/javascript"></script>
    <link href="res/tabs.css" rel="stylesheet" />
    <link href="../../res/third-party/scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
    <script src="../../res/third-party/scrollbar/jquery.mCustomScrollbar.concat.min.js" type="text/javascript"></script>
    <link href="res/frame.css" rel="stylesheet" type="text/css" />
    <link href="res/index.css" rel="stylesheet" type="text/css" />

</head>
<body>
    

<div class="sidebar">
    <div id="mainMenu"></div>
</div>

<div class="container">
    <div class="navbar">
        <div class="navbar-brand">MiniUI</div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><i class="fa fa-paper-plane"></i> 代办事项</a></li>
            <li><a href="#"><i class="fa fa-pencil-square-o"></i> 修改密码</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle userinfo">
                    <img class="user-img" src="res/images/user2-160x160.jpg" />个人资料<i class="fa fa-angle-down"></i>
                </a>
                <ul class="dropdown-menu pull-right">
                    <li><a href="#"><i class="fa fa-eye "></i> 用户信息</a></li>
                    <li><a href="#"><i class="fa fa-user"></i> 退出登录</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="main">
        <div id="mainTabs" class="mini-tabs indexTabs" activeIndex="0" style="width:100%;height:100%;" plain="false"
                buttons="#tabsButtons" arrowPosition="side">
            <div name="index" iconCls="fa-android" title="控制台">
                MiniUI导航框架
            </div>
        </div>
        <div id="tabsButtons">
            <a class="tabsBtn"><i class="fa fa-home"></i></a>
            <a class="tabsBtn"><i class="fa fa-refresh"></i></a>
            <a class="tabsBtn"><i class="fa fa-remove"></i></a>
            <a class="tabsBtn"><i class="fa fa-arrows-alt"></i></a>
        </div>
    </div>
</div>


</body>
</html>

<script>

    function activeTab(item) {
        var tabs = mini.get("mainTabs");
        var tab = tabs.getTab(item.id);
        if (!tab) {
            tab = { name: item.id, title: item.text, url: item.url, iconCls: item.iconCls, showCloseButton: true };
            tab = tabs.addTab(tab);
        }
        tabs.activeTab(tab);
    }

    $(function () {

        //menu
        var menu = new Menu("#mainMenu", {
            itemclick: function (item) {
                if (!item.children) {
                    activeTab(item);
                }
            }
        });

        $(".sidebar").mCustomScrollbar({ autoHideScrollbar: true });

        function autoScrollbar() {
            var jq = $(".mCSB_container");
            if (jq.parent().height() >= jq.children().outerHeight()) {
                jq.css("height", "100%");
            } else {
                jq.css("height", "auto");
            }
        }
        $(window).on("resize", function () {
            autoScrollbar();
        });
        autoScrollbar();

        new MenuPop(menu);

        $.ajax({
            url: "data/menu.txt",
            success: function (text) {
                var data = mini.decode(text);
                menu.loadData(data);


            }
        })

        //dropdown
        $(".dropdown-toggle").click(function (event) {
            $(this).parent().addClass("open");
            return false;
        });

        $(document).click(function (event) {
            $(".dropdown").removeClass("open");
        });
    });

</script>
